@import './../app/variables.css';
@import './../app/variablesV2.css';

:root {
  --search-box-width-l: 589px; /* stylelint-disable-line */
  --search-box-width-xl: 558px;
  --search-box-font-size: 16px;
  --search-box-line-height: 56px;
  --sub-title-line-height: 26px;
  --search-box-selection-background: var(--color-primary-light);
}

.searchBar {
  width: 100%;
  max-width: var(--search-box-width-l);
  height: 36px;
  box-sizing: border-box;
  border-radius: var(--border-radius-standard);
  position: relative;
  background-color: var(--color-white);
  margin-left: 9px;

  &:focus {
    border: 1.5px inset #4e80f7;
  }
}

@media (--large-viewport) {
  .searchBar {
    margin: 0 64px;
  }
}

@media (--medium-viewport) {
  .searchBar {
    margin: 0 35px;
  }
}

@media (--small-viewport) {
  .searchBar {
    margin: 0 25px;
  }
}
